<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-10-31 08:33:11
 * @LastEditTime: 2023-11-08 10:48:16
 * @LastEditors: huangshuai 
-->
<template>
  <el-upload
    action="http://139.159.149.18:8086/api/common/getFileUUIDName"
    v-model:file-list="fileList"
    list-type="picture-card"
    :auto-upload="true"
    :data="{ uploadType, smartCheck }"
    with-credentials
    name="files"
    :on-success="handleHide"
    :class="{ elHide: fileList.length }"
  >
    <div>
      {{ label }}
    </div>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>

          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove()"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" />
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Delete, ZoomIn } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadFile } from "element-plus";
const emits = defineEmits([
  "update:uid",
  "update:file",
  "update:petCategoryName",
]);
const props = defineProps({
  label: {
    type: String,
    require: false,
    default: "选择图片",
  },
  uploadType: {
    type: Number,
    require: false,
    default: 0,
  },
  smartCheck: {
    type: Number,
    require: false,
    default: 0,
  },
});

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const fileList = ref([]);
const uHide = ref(false);
const handleRemove = () => {
  emits("update:file", {});
  ElMessageBox.confirm("确定要删除这个图片吗？", "删除操作", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    fileList.value.splice(0, 1);
    ElMessage({
      type: "success",
      message: "删除成功",
    });
  });
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const handleHide = (res: any) => {
  if (props.smartCheck === 1) {
    emits("update:petCategoryName", res.data[0].petCategoryName);
    ElMessage({
      message: "宠物种类：" + res.data[0].petCategoryName,
      type: "success",
    });
  }
  emits("update:uid", res.data[0]);
  emits("update:file", fileList.value[0]);
  uHide.value = true;
};
const resetFile = () => {
  fileList.value = [];
};

defineExpose({
  resetFile,
});
</script>

<style lang="less">
.elHide .el-upload--picture-card {
  display: none;
}
</style>
